<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-04-20 09:16:32
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 16:33:37
 * @Description:
 *
-->

<template>
  <div class="workload-monitor-ctn" @click="jumpTo('monitor/cluster?activeTab=ServiceIndex')">
    <div class="title">服务监控</div>
    <div class="content">
      <div>
        <el-table
          :data="tableList"
          stripe
          :header-cell-style="{ height: '40px !important',color: 'rgba(219, 241, 255, 1)',background:'rgba(54, 78, 120, 0.8400) !important'}"
          :row-style="{background:'rgba(48, 102, 142, 0.3700)',color:'rgba(176, 207, 232, 1)'}"
          :cell-style="{height:'35px'}"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="applicationName"
            :show-overflow-tooltip="true"
            align="left"
            label="应用名称"
          />
          <el-table-column
            prop="microServiceName"
            align="left"
            :show-overflow-tooltip="true"
            label="微服务名称"
          />

          <el-table-column
            prop="totalNum"
            align="left"
            label="实例个数"
          >
            <template slot-scope="scope">
              <el-progress type="line" :percentage="(scope.row.normalNum)/(scope.row.totalNum==0?0.00001:scope.row.totalNum)*100" :format="format(scope.row.normalNum,scope.row.totalNum)" color="rgba(0, 234, 255, 1)" :text-inside="false" :stroke-width="12" />
            </template>
          </el-table-column>
          <el-table-column
            prop="clusters"
            align="left"
            :show-overflow-tooltip="true"
            label="部署集群"
          >
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.clusterNames" :key="index" class="clickStyle">
                {{ item.id }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getServiceMonitor } from '@/api/cnap/situation.js'
export default {
  name: 'WorkloadMonitor',
  props: {},
  data() {
    return {
      tableList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * @description: 页面初始化
     * @description: 获取数据
     * @return {*}
     */
    getData() {
      getServiceMonitor().then(res => {
        // code==200是正常返回
        if (res.code === 200) {
          // 返回结果取值
          // 信息在res.data中
          this.tableList = res.data
        } else {
          (
            // 数据查询失败
            // 输出报错信息
            this.$message.error(res.message)
          )
        }
      })
    },
    /**
     * @description: 进度条
     * @description: 进度条数值
     * @return {*}
     */
    format(row, column) {
      return () => {
        return row + '/' + column
      }
    },
    /**
     * @description: 跳转
     * @description: 跳转集群监控页面
     * @return {*}
     */
    jumpTo(path) {
      this.$router.replace({
        path: path
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.workload-monitor-ctn {
  width: 494px;

  .title {
    width: 494px;
    height: 28px;
    line-height: 28px;
    background: url("~@/assets/imgs/situation/bg_title_normal.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 25px;
    .textStyle(16px , 600, #03d3ff);
  }

  .content {
    margin-top: 8px;
    box-sizing: border-box;
    //padding: 8px 10px 0;
    height: 212px;
    background: linear-gradient(
      351deg,
      rgba(60, 108, 158, 0.37) 0%,
      rgba(19, 61, 91, 0.35) 100%
    );

    .titles {
      height: 34px;
      background: rgba(54, 78, 120, 0.84);
      display: flex;
      align-items: center;

      .title-item {
        .textStyle(14px , 500, #DBF1FF);
        box-sizing: border-box;
        &.t1 {
          width: 110px;
          padding-left: 14px;
        }
        &.t2 {
          width: 135px;
        }
        &.t3 {
          flex: 1;
        }
        &.t4 {
          width: 80px;
        }
      }
    }
  }
}
</style>
<style lang="less">
.workload-monitor-ctn {
     .el-table--striped .el-table__body tr.el-table__row--striped td {
       background-color:rgba(0, 21, 39, 0.3100) !important; /* def2ff f2faff */
    }
  .el-table,
       .el-table__expanded-cell {
        background-color: transparent !important;
      }
      /* 表格内背景颜色 */
       .el-table th,
       .el-table tr,
      .el-table td {
        background-color: transparent !important;
        border:0 !important; //去除表格
      }
    /*去除底边框*/
    el-table td.el-table__cell {
      border:0 !important;
    }
    el-table th.el-table__cell.is-leaf {
      border:0 !important;
    }
    .el-table .el-table__cell {
    padding: 0px 0px !important;
    }
    //去除鼠标悬浮效果
    .el-table::before {
    height: 0px !important;
    }
}
</style>
